<template>
    <div class="print-f-box">
        <div class="print-hide">
            <h1>PDF渲染</h1>
            <button @click="pdfPrint()">打印</button>
        </div>
        <div id="pdfBox" style="min-height: 500px;"></div>
    </div>
</template>
<script>
// pdfjs 2.0.943 资源引入
import * as pdfjsLib from 'pdfjs-dist';
import { workerSrc } from "pdfjs-dist/build/pdf.worker.min";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer';
import 'pdfjs-dist/web/pdf_viewer.css';
export default {
    data() {
        return {
            pdf: ''
        }
    },
    methods: {
        //打印
        pdfPrint() {
            window.print();
        },

        // 在 PDF 页面上叠加超链接
        addLinkToPage(page, link) {
            console.log("link===", link);
            const linkDiv = document.createElement("a");
            linkDiv.href = link.url;
            linkDiv.target = "_blank";
            linkDiv.style.position = "absolute";
            linkDiv.style.left = link.rect[0] * 1.5 + "px";
            linkDiv.style.top = (843 - link.rect[3]) * 1.5 + "px";
            linkDiv.style.width = (link.rect[2] - link.rect[0]) * 1.5 + "px";
            linkDiv.style.height = (link.rect[3] - link.rect[1]) * 1.5 + "px";
            linkDiv.style.backgroundColor = "transparent";
            // linkDiv.style.border = "1px solid red";
            linkDiv.style.pointerEvents = "auto";
            linkDiv.style.zIndex = "1"
            page.appendChild(linkDiv);
        },

        /**
         * 渲染每页pdf
         */
        renderPage(pageNumber) {
            this.pdf.getPage(pageNumber).then((page) => {
                // var viewport = page.getViewport({ scale: 1.5 });
                var viewport = page.getViewport(1.5);

                // 创建canvas承载pdf内容
                const canvas = document.createElement("canvas");
                const canvasContext = canvas.getContext("2d");
                canvas.height = viewport.height;
                canvas.width = viewport.width;
                canvas.style.display = "block";

                canvasContext.setTransform(1, 0, 0, 1, 0, 0);

                const canvasBox = document.createElement("div");
                canvasBox.style.height = viewport.height + 2 + "px";
                canvasBox.style.width = viewport.width + 2 + "px";
                canvasBox.style.margin = "0 auto 10px";
                canvasBox.style.border = "1px solid #ccc";
                canvasBox.style.position = "relative";
                canvasBox.appendChild(canvas);

                const pdfBox = document.getElementById("pdfBox");
                pdfBox.appendChild(canvasBox);

                const renderContext = {
                    canvasContext,
                    viewport,
                };

                // const renderTask = page.render(renderContext)

                page
                    .render(renderContext)
                    .then(() => {
                        return page.getTextContent();
                    })
                    .then((textContent) => {
                        // 实现选中复制功能
                        const textLayerDiv = document.createElement("div");
                        textLayerDiv.setAttribute("class", "textLayer");
                        canvasBox.appendChild(textLayerDiv);

                        let textLayer = new TextLayerBuilder({
                            textLayerDiv: textLayerDiv,
                            pageIndex: page.pageIndex,
                            viewport: viewport,
                        });

                        textLayer.setTextContent(textContent);
                        textLayer.render();
                    });

                // 实现链接点击
                page.getAnnotations().then(function (annotations) {
                    console.log("annotations==", annotations);
                    annotations.forEach(function (annotation) {
                        if (annotation.subtype === "Link") {
                            this.addLinkToPage(canvasBox, annotation);
                        }
                    });
                });
            });
        },


    },
    mounted() {
        //这里获取线上PDF地址，测试暂时写死
        const url = 'http://speedcn.vicp.cc:1380/provider/tsinghua.war/tsinghua.api/publish/2024/06/17/190258FC757226074E4DE9BF4D979028/content.pdf';
        pdfjsLib.getDocument(url).promise.then((pdf) => {
            this.pdf = pdf;
            let pages = pdf.numPages;
            for (let i = 1; i <= pages; i++) {
                this.renderPage(i);
            }
        });
    }
}
</script>
<style scoped>
@media print {
    .print-hide {
        display: none;
    }

    #pdfBox{
        position: absolute;
        top: 130px;
        left: 0;
        width: 100% !important;
        border: none !important;
    }

    .print-f-box {
        position: relative;
        width: 1000px !important;
    }


}
</style>